<template>
    <div class="home-pass">
        <Form ref="editPasswordForm" :model="editPasswordForm" :label-width="100" label-position="right" :rules="passwordValidate">
            <div style="margin:0 0 20px 10px;">修改<span style="color:red;">{{this.employeeName}}</span>的密码</div>
            <FormItem label="当前密码：" prop="oldPassword" :error="oldPassError">
                <div style="display:inline-block;width:300px;">
                    <Input type="password" v-model="editPasswordForm.oldPassword" placeholder="请输入当前密码" :value="radioed"/>
                </div>
               <!-- <input type="radio" v-model="radioed" value="111111" class="home-radio"/><span>初始化密码为<span>111111</span></span>
         -->   </FormItem>
            <FormItem label="新密码：" prop="newPassword">
                <div style="display:inline-block;width:300px;">
                    <Input type="password"  :maxlength=16 v-model="editPasswordForm.newPassword" placeholder="请输入新密码，至少6位字符"/>
                </div>
                <label class="tip">字母、符号和数字组合设置，密码长度6~16字符</label>
            </FormItem>
            <FormItem label="确认新密码：" prop="rePass">
                <div style="display:inline-block;width:300px;">
                    <Input type="password"  :maxlength="16" v-model="editPasswordForm.rePass"  placeholder="请输入确认新密码"/>
                </div>
            </FormItem>
        </Form>
        <div slot="footer" style="margin-left:121px;margin-top:50px;">
            <!--<Button type="text" @click="cancelEditPass">取消</Button>-->
            <Button type="primary" :loading="savePassLoading" @click="saveEditPass('editPasswordForm')">确认修改密码</Button>
        </div>
    </div>
</template>

<script>
    import {getLoginOutApi} from '../../http/loginOut.api'
    import { updatePasswordApi } from '../../http/password.api'
    export default {
        name: 'password',
        data () {
            const valideRePassword = (rule, value, callback) => {
                if (value !== this.editPasswordForm.newPassword) {
                    callback(new Error('两次输入密码不一致'))
                } else {
                    callback()
                }
            }
            const valideNewPassword = (rule, value, callback) => {
                let patrn = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?![,\.!@#$%^&*?~'\+\*\-:;^_`]+$)[,\.!@#$%^&*?~'\+\*\-:;^_`0-9A-Za-z]{6,16}$/
                if(value == this.editPasswordForm.oldPassword) {
                    callback(new Error('新旧密码不能一样'))
                } else if (!patrn.exec(value)) {
                    callback(new Error('密码需是字母、符号或数字组合')) 
                } else {
                    callback()
                }
            }
            return {
                userName:'',
                id:'',
                params:{
                    userId:''
                },
               employeeName: localStorage.getItem('employeeName'),
                avatar:{},
                addImg: {},
                uploadList: [],
                editShow: true,
                modal1: false,
                radioed: '',
                result:{},
                editPasswordModal: true, // 修改密码模态框显示
                oldPassError: '',
                savePassLoading: false,
                editPasswordForm: {
                    oldPassword: '',
                    newPassword: '',
                    rePass: ''
                },
                passwordValidate: {
                    oldPassword: [
                        { required: true, message: '请输入原密码', trigger: 'blur' }
                    ],
                    newPassword: [
                        { required: true, message: '请输入新密码', trigger: 'blur' },
                        { min: 6, message: '请至少输入6个字符', trigger: 'blur' },
                        { max: 16, message: '最多输入16个字符', trigger: 'blur' },
                        { validator: valideNewPassword, trigger: 'blur' },
                    ],
                    rePass: [
                        { required: true, message: '请再次输入新密码', trigger: 'blur' },
                        { validator: valideRePassword, trigger: 'blur' }
                    ]
                }
            }
        },
        created () {
            const userName = localStorage.getItem('userName')
        },
        mounted() {
            console.log(this.$store.state.login.userInfo)
        },
        methods: {
            showEdits (){
                this.editShow = !this.editShow
                console.log("this.editShow===="+this.editShow)
            },
            showEditPassword () {
                this.editPasswordModal = true
            },
            cancelEditPass () {
                this.editPasswordModal = false
            },
            saveEditPass (name) {
                const _this = this;
                _this.$refs[name].validate((valid) => {
                    if (valid) {
                       /*this.spinShow = true*/
                        // console.log("this.$route.params.id==="+this.$route.params.id)
                        updatePasswordApi(this.editPasswordForm,this.$route.params.id).then(suc => {
                            _this.$Message.success('密码修改成功');

                            getLoginOutApi().then(resp => {
                                _this.success = resp.data.success
                            }).catch(err => {
                                // this.$Message.error("错误代码【"+err.data.code+"】，"+err.data.message)
                            }).finally(function (res) {
                                localStorage.clear()
                                _this.$router.push('/login')
                            })

                            /* this.spinShow = false*/
                        }).catch(err => {
                            _this.$Message.error("错误代码【"+err.data.code+"】，"+err.data.message)
                            /*this.spinShow = false*/
                        })
                    }
                })
            },

            handleReset (name) {
                this.$refs[name].resetFields()
            }
        }
    }
</script>

<style scoped>
    .user{
        width: 100%;
        height: 100%;
    }
    .tip{
        margin-left: 5px;
    }
    /*.home-pass{
        border: 1px solid #ccc;
        padding: 20px 0 20px 0;
    }*/
</style>